<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/iconfont.css">
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/search.css">
	</head>

	<body>
		<div class="container">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">垃圾分类</h1>
			</header>
			<section>
				<div class="search-input" >
					<h1>匹配结果</h1>
					<form action="" onsubmit="return false" id="searchForm">
						<input type="search" placeholder="请输入" autofocus="autofocus" id="searchInput">
					</form>
				</div>
				<div class="hot-search">
					<h3>热门搜索</h3>
					<ul id="hotSearch">
					</ul>
				</div>
				<div class="search-history">
					<h3>搜索历史</h3>
					<ul id="searchHistory">
						<li>
							<div>
								<i class="iconfont icon-shijian"></i>
								<span>sa</span>
							</div>
							<div>></div>
						</li>
					</ul>
				</div>
			</section>
		</div>
	</body>
	<script src="js/mui.js"></script>
	<script src="js/flexible.js"></script>
	<script src="js/iconfont.js"></script>
	<script type="text/javascript">
		mui.init();
		mui.plusReady(function () {
			/* 一进入页面就读取 */
			
			
			/* 请求数据并且渲染 */
			mui.ajax('http://apis.juhe.cn/rubbish/hotSearch',{
				data:{
					key:'dfe7a5dc90a9be32d35d15d5a06eb619',
				},
				success:function(data){
					var result = data.result;
					mui.each(result,function(index,item){
						mui('#hotSearch')[0].innerHTML += `<li data-title ='${item.itemName}'>${item.itemName}</li>`
					})
				}
			})
			
			/* 点击跳转到对应展示界面 */
			mui("#hotSearch").on('tap','li',function(){
				var dataTitle = this.getAttribute('data-title');
				fGoSearch(dataTitle);
			})
			
			/* 设置数组存储本地数据 */
			var arrSearch = JSON.parse(localStorage.getItem("history"))||[];
			var inputVal = '';
			var searchHistory = mui("#searchHistory")[0];
			/* 输入点击搜索跳转到对应匹配结果 */
			mui(".search-input").on('keypress','#searchForm',function(e){
				var keyCode = e.keyCode;
				inputVal = document.querySelector("#searchInput").value;
				if ( keyCode == 13){
					fGoSearch(inputVal);
					/* 收起键盘 */
					document.activeElement.blur();
					
					var newLi = document.createElement('li');
					newLi.innerHTML = `<div>
								<i class="iconfont icon-shijian"></i>
								<span>${inputVal}</span>
							</div>
							<div>></div>` ;
					newLi.setAttribute('data-title',inputVal);
					searchHistory.appendChild(newLi);
					arrSearch.unshift(inputVal); 
					localStorage.setItem('history',JSON.stringify(arrSearch));
				}
			})
			
			var storage = JSON.parse(localStorage.getItem("history"));
			storage.forEach(function(item,index){
				var newLi = document.createElement("li");
				newLi.setAttribute('data-title',item);
				newLi.innerHTML = `<div>
								<i class="iconfont icon-shijian"></i>
								<span>${item}</span>
							</div>
							<div>></div>`;
				searchHistory.insertBefore(newLi,searchHistory.getElementsByTagName('li')[0]);
			})
			/* 点击历史右边的箭头跳转至详情页面 */
			mui("#searchHistory").on('tap','li',function(){
				var dataTitle = this.getAttribute('data-title');
				fGoSearch(dataTitle);
			})
			
			
			/* 点击空白处收起键盘 */ 
			window.addEventListener('touchstart',function(){
				document.activeElement.blur();
			},false);
			/* 将跳转至搜索结果封装成函数 */
			function fGoSearch(val){
				mui.openWindow({
					url:'detail.html',
					id:'detail',
					extras:{
						title:encodeURI(val)
					},
					show:{
						autoShow:true
					},
					waiting:{
						autoShow:true,
						title:'正在加载中...'
					}
				})
			}
		})
	</script>
</html>
